---
title: Front Matter CMS 与 Astro
description: 使用 Front Matter CMS 作为 CMS 向你的 Astro 项目添加内容
sidebar:
  label: Front Matter CMS
type: cms
logo: frontmatter-cms
i18nReady: true
---
import { FileTree } from '@astrojs/starlight/components';

[Front Matter CMS](https://frontmatter.codes/) 将 CMS 集成到你的编辑器中，它可以在 Visual Studio Code、GitPod 和许多其他编辑器中运行。

## 与Astro集成

在本节中，我们将介绍如何将 Front Matter CMS 添加到你的 Astro 项目中。

### 前提条件 

- Visual Studio Code
- 使用 [Astro 博客模板](https://github.com/withastro/astro/tree/main/examples/blog) 来提供基本配置和示例内容，以便开始使用 Front Matter CMS。

### 安装 Front Matter CMS 扩展

你可以从[Visual Studio Code Marketplace - Front Matter](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter)获取扩展，或者点击以下链接：[在 VS Code 中打开 Front Matter CMS 扩展](vscode:extension/eliostruyf.vscode-front-matter)

### 项目初始化

安装 Front Matter CMS 后，你将在活动栏中获得一个新的图标。单击该图标将在主侧边栏中打开 **Front Matter CMS** 面板。按照下面的步骤来初始化你的项目：

- 在 Front Matter 面板上点击 **Initialize project** 按钮
- 欢迎屏幕将会打开，然后你可以在上面开始初始化项目
- 点击第一步 **Initialize project**
- 由于 Astro 是受支持的框架之一，你可以从列表中选择它
- 注册你的内容文件夹，在本例中是`src/content/blog`文件夹。

  :::note
  文件夹注册是必需的，以便让 Front Matter CMS 知道在哪里找到和创建你的内容。你可以有多种类型的文件夹，比如页面、博客、文档等等。
  :::

- 你将被要求输入文件夹的名称。默认情况下，它会使用文件夹名称。

  :::note
  名称将在新内容的创建过程中使用。例如，有多个文件夹注册可以让你选择要创建的内容类型。
  :::

- 点击 **Show the dashboard** 以打开内容仪表板

  :::tip
  一旦 Front Matter CMS 初始化完成，你可以按照以下方式打开仪表板：

  - 使用键盘绑定：<kbd>alt</kbd> + <kbd>d</kbd>（Windows 和 Linux）或 <kbd>options</kbd> + <kbd>d</kbd>（macOS）
  - 打开命令面板，搜索`Front Matter: Open dashboard`
  - 单击面板标题栏或文件上的 **Front Matter** 图标。
  :::

### 项目配置

项目初始化后，你将在项目的根目录中获得一个 `frontmatter.json`配置文件和一个 `.frontmatter` 文件夹。

<FileTree title="Project Structure">
- .frontmatter/
  - database/
    - mediaDb.json
- src/
- astro.config.mjs
- **frontmatter.json**
- package.json
</FileTree>

#### 内容类型配置

内容类型是 Front Matter CMS 管理你的内容的方式。每个内容类型包含一组字段，可以根据你希望在网站上使用的每种类型的内容来定义。

这些字段对应于页面内容的前置信息。

你可以在 `frontmatter.json` 文件中配置内容类型。

- 打开 `frontmatter.json` 文件
- 用以下内容类型配置替换 `frontMatter.taxonomy.contentTypes` 数组：

```json title="frontmatter.json"
"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Publishing date",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Content preview",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]
```

:::note
此配置确保 Front Matter 内容类型与 Astro 博客模板的内容集合模式匹配。
:::

:::tip
你可以在 Front Matter CMS 的 [内容创建文档](https://frontmatter.codes/docs/content-creation) 部分中找到有关内容类型和支持的字段的更多信息。
:::

### 在编辑器中预览文章

从 **Front Matter CMS** 面板，点击 **Start server** 按钮。此操作将启动 Astro 本地开发服务器。一旦运行，你就可以打开内容仪表板，选择一篇文章，然后点击 **Open preview** 按钮将文章在编辑器中打开。

### 创建新文章

打开 **Front Matter CMS Dashboard**，你可以按照以下方式操作： 

- 打开 `Front Matter CMS` 的内容仪表板
- 点击 **Create content** 按钮
- Front Matter 将要求你输入文章的标题，输入标题并按 Enter 键
- 你的新文章将被创建并在编辑器中打开，接着你可以开始编写文章了

### 使用 Markdoc 与 Front Matter CMS

要在 Front Matter CMS 中使用 Markdoc，你必须在 `frontMatter.content.supportedFileTypes` 中进行配置。此设置使 CMS 知道它可以处理哪种类型的文件。

你可以按以下方式配置此设置：

```json title="frontmatter.json"
"frontMatter.content.supportedFileTypes": [ "md", "markdown", "mdx", "mdoc" ]
```

要允许将内容创建为 Markdoc，请在内容类型上指定 `fileType` 属性。

```json title="frontmatter.json" ins={7}
"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fileType": "mdoc",
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Publishing date",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Content preview",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]
```

## 官方资源

- [Front Matter CMS](https://frontmatter.codes/)
- [Front Matter CMS - 文档](https://frontmatter.codes/docs/)
- [使用 Astro 和 Front Matter CMS 入门](https://youtu.be/xb6pZiier_E)
